<template>
  <p>App</p>
  <p>{{ count }}</p>
  <button @click="count++">按钮</button>
  <keep-alive>
    <Child v-if="isShow" />
  </keep-alive>
  <button @click="isShow = !isShow">切换</button>
</template>

<script lang="ts">
/*
  生命周期函数：
    1. 创建（初始化）阶段
      beforeCreate
      created
    2. 挂载阶段
      beforeMount
      mounted
        发送请求、设置定时器、绑定DOM事件、绑定自定义事件等异步任务
    3. 更新阶段
      beforeUpdate
      updated
    4. 卸载阶段
      Vue2中  
        beforeDestroy
        destroy
      Vue3中
        beforeUnmount
          清除定时器、解绑事件等收尾工作, 防止内存泄漏
        unmounted

    被keep-alive组件缓存的组件，多两个生命周期
      activated   激活
      deactivated 失效

    errorCaptured 用来捕获后代组件产生的错误
*/
import Child from "./Child.vue";

export default {
  name: "App",
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  errorCaptured(error) {
    console.log("errorCaptured");
    console.dir(error);
    // 收集到错误，将错误数据作为请求参数，发送请求给服务器
  },
  data() {
    return {
      count: 0,
      isShow: true,
    };
  },
  components: {
    Child,
  },
};
</script>
